<%@page import="java.awt.print.Printable"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="0">
<%
response.setHeader("Cache-Control","no-store");
response.setHeader("Pragrma","no-cache");
response.setDateHeader("Expires",0);
%>
<title>_${customer.customerName}_推车拣选</title>
<script language="javascript" type="text/javascript" src="${ctx}/static/datepicker/WdatePicker.js"></script>
<script type='text/javascript'
      src='http://wms.ttyuncang.com/WebSpeech.js'></script>
<script type="text/javascript">

  var curItemId='';
  var car_pick_flag=false;
  
  $(function() {
		$("#queryForm").validate(); 
		var status='${task.status}';
		if(status=='11'){
			 car_pick_flag=true;
			 
			
		}
		
  });
  WebSpeech.ready(function() {
	  WebSpeech.speak('听到声音了吗？');
  });
  function keydown(){
      $("#message").html('');
  }
  function ajaxBindCar(){
	 var carCode=$("#sel_carCode").val();
     if(carCode.length==0){
    	 alert("拣选车为空");
    	 $("#stockInfo").html("");
    	 return false;
     }
     $.ajax({
			type : 'post',
			async:false,
			url : '${ctx}/carPickTask/searchPickCar',
			data : {
				carCode:carCode
			},
			dataType : 'json',
			success : function(data) {
			   var status=data.status;
			   if(status=='2'){
			      $("#message").css("color","red");
			      $("#message").html("已使用");
			      WebSpeech.speak('使用中，请选择其他拣选车!');
			   }else if(status=='3'){
			       $("#message").css("color","red");
			       $("#message").html("查询错误!");
			       WebSpeech.speak('查询错误!');
			   }else if(status=='1'){
			      var pickCar=data.pickCar;
			      var stockList = data.stockList;
				  var str="";
				  $.each(stockList, function(i) {
					    var stock=stockList[i];
					    str +="<tr name='tr_stock' >";
					    str += "<td id='stockCode_"+stock.stockCode+"'>"+stock.stockCode+"</td>";
						str += "<td id='stockName_"+stock.stockCode+"'>" +stock.stockName+ "</td>";
						
						var status=stock.status;
						if(status=='free'){
						  str += "<td name='status' id='"+stock.stockCode+"'>空置中</td>";
						}else if(status=='busy'){
						  str += "<td name='status' id='"+stock.stockCode+"'>使用中</td>";
						}
						str += "<td name='orderno' id='orderno_"+stock.stockCode+"'></td>";
						str += "<td id='goodsNum_"+stock.stockCode+"'></td>";
						str += "<td id='goodsInfo_"+stock.stockCode+"'></td>";
						
						str +="</tr>";
					});
					
					$("#stockInfo").html(str);
			   }
			},
			error:function() {
				alert("网络繁忙，请稍后重试...");
			}
		}); 
  } 
  function confirm(){
	  var carCode=$("#sel_carCode").val();
	  var picker=$("#sel_picker").val();
	  var status='${task.status}';
	  if(carCode.length==0){
	    	alert("拣选车为空");
	    	return false;
	  }
	  if(status=='11'){
		  $.ajax({
				type : 'post',
				url : '${ctx}/carPickTask/updatePicker',
				data : {
					picker:picker,
					taskCode:'${task.taskCode}',
				},
				dataType : 'json',
				success : function(data) {
				   var status=data.status;
				   if(status=="success"){
					   alert("修改成功");
					   window.location.reload();
				   }else{
					   alert("修改失败");
				   }
				},
				error:function() {
					alert("网络繁忙，请稍后重试...");
				}
			}); 
	  }else{
		  $.ajax({
				type : 'post',
				url : '${ctx}/carPickTask/ajaxFastBindCar',
				data : {
					carCode:carCode,
					picker:picker,
					taskCode:'${task.taskCode}',
				},
				dataType : 'json',
				success : function(data) {
				   var status = data.status;
				   var content = data.content;
				   if(status=='0'){
				      $("#message").css("color","red");
				      $("#message").html(content);
				   }else if(status=='4'){
				       $("#message").css("color","red");
				      $("#message").html("车位数不能满足此任务,请选择其他拣选车!");
				   }else if(status=='1'){
				      $("#message").css("color","green");
				      $("#message").html("成功绑定拣选车!");
				      car_pick_flag=true;
				      $("#sel_carCode").attr("disabled","disabled");
				      var pickCar=data.pickCar;
				      var stockList = data.stockList;
					  var str="";
					  $.each(stockList, function(i) {
						    var stock=stockList[i];
						    str +="<tr name='tr_stock' >";
						    str += "<td id='stockCode_"+stock.stockCode+"'>"+stock.stockCode+"</td>";
							str += "<td id='stockName_"+stock.stockCode+"'>" +stock.stockName+ "</td>";
							
							var status=stock.status;
							if(status=='free'){
							  str += "<td name='status' id='"+stock.stockCode+"'>空置中</td>";
							}else if(status=='busy'){
							  str += "<td name='status' id='"+stock.stockCode+"'>使用中</td>";
							}
							str += "<td name='orderno' id='orderno_"+stock.stockCode+"'></td>";
							str += "<td id='goodsNum_"+stock.stockCode+"'></td>";
							str += "<td id='goodsInfo_"+stock.stockCode+"'></td>";
							
							str +="</tr>";
						});
						
						$("#stockInfo").html(str);
						
						//写入订单数据
						var orderList=data.orderList;
						$.each(orderList,function(i,order){
							var stockCode=order.rankno;
							$("#orderno_"+stockCode).html(order.order.ordeno); 
			                var goodsNum=0;
			                var goodsInfo='';
			               $.each(order.order.orderItems,function(j,orderItem){
			            	   goodsNum+=orderItem.qty;
			            	   goodsInfo+=orderItem.sku+"_"+orderItem.qty+";"
			               });
			               $("#goodsNum_"+stockCode).html(goodsNum);
			               $("#goodsInfo_"+stockCode).html(goodsInfo);
			              
						 }); 
				      
				   }
				   
				},
				error:function() {
					alert("网络繁忙，请稍后重试...");
				}
			}); 
	  }
	  
  }
   function printTask(item,url){
	   $(item).attr("href","#"+url);
		$(item).attr("data-toggle","modal");
	   packFormDefaultPrinter("pickTaskStylePrint");
   }
   function printFastPickTask(){
	   showBg();
	   $.ajax({
			type : 'post',
			url : '${ctx}/carPickTask/printFastPickTask',
			data : {
				taskCode:'${task.taskCode}'
			},
			dataType : 'json',
			success : function(data) {
			   if(data.status == "1"){
				   printPickInfo(data.workTaskItemList,data.printFlag,data.picker);
				   closeBg();
			   }else{
				   alert(data.content);
				   closeBg();
			   }
			},
			error:function() {
				alert("网络繁忙，请稍后重试...");
				closeBg();
			}
		}); 
   }
   function printPickInfo(taskItem,printFlag,picker){
	   initLodop();
		var taskCode = taskItem[0].taskCode;
		var adjustTop = 0;
	 	var adjustLeft = 0;
		var str = '';
		var num = 0;
		LODOP.PRINT_INIT(taskCode);
		//LODOP.ADD_PRINT_BARCODE((15+adjustTop)+"mm", (140+adjustLeft)+"mm", "45mm", "10mm", "128Auto", taskCode);
		LODOP.ADD_PRINT_BARCODE((15+adjustTop)+"mm", "65%", "45mm", "10mm", "128Auto", taskCode);
		str +="<table width='100%' cellpadding='0' cellspacing='0' align = 'center' border='1'>";
		str +="<thead>"
		str +="<tr><td colspan= '7' align = 'center'><h3>拣货单(任务编号："+taskCode+")&nbsp;&nbsp;第"+printFlag+"次打印</h3></td></tr>";
		str +="</thead>"
		str +="<tbody align = 'center'><tr><td colspan= '2'>仓库</td><td colspan= '2'>"+taskItem[0].warehouseCode+"</td></tr>";
		str += "<tr style='font-size:10pt'><td width='6%'>序号</td><td width='8%'>商家</td><td width='15%'>库位</td><td width='18%'>sku</td><td width='31%'>sku名称</td><td width='7%'>数量</td><td width='15%'>箱位指引</td></tr>";
		 for(var i =0;i<taskItem.length;i++){
			 /*var tmpSkuName='';
			tmpSkuName=taskItem[i].skuName;
			if(tmpSkuName.length>20){
				tmpSkuName=tmpSkuName.substr(0,15)+"..."
			} 
			*/
			str +="<tr style='font-size:12pt' ><td>"+(i+1)+"</td><td>"+taskItem[i].customerCode+"</td><td>"+taskItem[i].stockCode+"</td><td>"+taskItem[i].sku+"</td><td>"
			+taskItem[i].skuName+"</td><td>"+taskItem[i].num+"</td><td>"+taskItem[i].allocationDetail+"</td></tr>";
			num += taskItem[i].num;
		}
		str +="</tbody>";
		str +="<tfoot align = 'center'><tr><td colspan= '5'></td><td>"+num+"</td><td>拣货人:"+picker+"</td></tr></tfoot>";
		str +="</table>";
		LODOP.SET_PRINT_PAGESIZE(1, 0, 0, $("#paperSizes").val());
		//bug382 by zhangweize L918 改成93%主要是防止分页的时候漏打。 
		//LODOP.ADD_PRINT_TABLE(30,0, "100%","100%",str);
		LODOP.ADD_PRINT_TABLE(30,0, "100%","93%",str);
		if (LODOP.SET_PRINTER_INDEXA($("#pickTaskStylePrint").val())) {
			LODOP.PRINT(); 
		}
   }
   function initLodop() {
		LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
	}
</script>
</head>

<body>

<section class="content">
<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-edit"></i>
					<h3 class="box-title">当前任务项（${task.batchCode}-${task.taskCode}）</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
				
	<!-- 条码扫描区 -->
	<table class="table table-striped table-bordered table-condensed" style="margin-top: 0px;">
	      <tr>
	        <td style="width: 120px; font-weight: bold; vertical-align: middle;">选择拣选车：</td>
		    <td  style="width: 140px;">
		     <c:choose>
		     	<c:when test="${task.status eq '11' }">
		     		<select  name="sel_carCode"  id="sel_carCode"  disabled="disabled">
		     			 	<option value="${curPickCar.carCode}">${curPickCar.carName}</option>
					  </select>
		     	</c:when>
		     	<c:otherwise>
		     		 <select  name="sel_carCode"  id="sel_carCode" onchange="ajaxBindCar();">
					  	 <option value=""></option>
						 <c:forEach items="${pickCarList}" var="car">
							<option value="${car.carCode}">${car.carName}</option>
						 </c:forEach>
					  </select>
		     	</c:otherwise>
		     </c:choose>
				 
		    </td>
	      <td style="width: 120px;font-weight: bold;vertical-align: middle;">拣货人：</td>
	      <td style="vertical-align: middle; width: 140px;" >
	      	<c:choose>
	      		<c:when test="${task.status eq '11' }">
	      			<c:if test="${curAssignUser.id eq loginerId }">
	      				<select  name="sel_picker"  id="sel_picker" >
							<c:forEach items="${userList}" var="user">
								<option value="${user.id}" <c:if test="${curpickUser.id eq user.id}">selected=selected</c:if>>${user.realname}</option>
							</c:forEach>
						</select>
	      			</c:if>
		     		<c:if test="${curAssignUser.id ne loginerId }">
			     		<select  name="sel_picker"  id="sel_picker"  disabled="disabled">
							<c:forEach items="${userList}" var="user">
								<option value="${user.id}" <c:if test="${curpickUser.id eq user.id}">selected=selected</c:if>>${user.realname}</option>
							</c:forEach>
						</select>
					</c:if>
		     	</c:when>
		     	<c:otherwise>
		     		 <select  name="sel_picker"  id="sel_picker"  >
						 <c:forEach items="${userList}" var="user">
							<option value="${user.id}" <c:if test="${loginerId eq user.id}">selected=selected</c:if>>${user.realname}</option>
						</c:forEach>
					  </select>
		     	</c:otherwise>
		     </c:choose>
      	 		
	      </td>
	      <td colspan="3" style="vertical-align: middle;">
	        <span style="margin-left:12px; margin-top: 10px; color: red;font-weight: bold;" id="message"></span>
	      </td>
	   </tr>
	   <tr>
	   	 <td colspan="7">
	   	 
	   	  	<c:choose>
		     	<c:when test="${task.status eq '11' }">
		     		<c:if test="${curAssignUser.id eq loginerId }">
			     		<a class="btn btn-primary" onclick="confirm()" >确认领取</a>
					</c:if>
		     	</c:when>
		     	<c:otherwise>
		     		 <a class="btn btn-primary" onclick="confirm()" >确认领取</a>
		     	</c:otherwise>
		     </c:choose>
	   	 	<a class='btn btn-primary' role='button' onclick="printTask(this,'printPickTask');" >打印拣货单</a>
			<a href="${ctx}/print/v2_toReprintPage/${task.taskCode}" role="button"  class="btn btn-primary">打印面单</a>
			<a class="btn btn-primary" href="${ctx}/pickTask/v2_toPickTaskListPage">返回</a>
	   	 </td>
	   </tr>
	</table>
	</div></div></div></div>
	
<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-edit"></i>
					<h3 class="box-title">拣货任务项 </h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
				
	<!-- 拣货任务项 -->
	<table class="table  table-bordered " style="margin-top: 0px;">
<!-- 		<thead> -->
<!-- 			<th style="vertical-align: middle; color: white; " colspan="13" bgcolor="#8EB4CB">拣货任务项 </th> -->
<!-- 		</thead> -->
		<thead><tr>
		        <th width="80">序号</th>  
			    <th>库位编号</th>
			    <th>箱子编号</th>
			    <th>订单编号</th>
			    <th>SKU编号</th>
			    <th>待拣数量</th>
			    <th>已拣数量</th>
			    <th>状态</th>
			</tr></thead>
			
			<tbody id="tbody_taskItem">
			<c:forEach items="${taskItemList}" var="item" varStatus="i">
			    <tr id="tr_${item.id}" name="${item.id}" >
				   <td>${i.count}</td>
				   <td id="stockCode_${item.id}">${item.stockCode}</td>
				   <td id="boxCode_${item.id}">${item.boxCode}</td>
				   <td id="orderno_${item.id}">${item.orderno}</td>
				   <td id="sku_${item.id}">${item.sku}</td>
				   <td id="num_${item.id}">${item.num}</td>
				   <td id="pickedNum_${item.id}">${item.pickedNum}</td>
				   <td id="pickStatus_${item.id}" name="${item.pickStatus}">
				     <c:if test="${item.pickStatus eq 'unpicked'}">待拣货</c:if>
				     <c:if test="${item.pickStatus eq 'picking'}">拣货中</c:if>
				     <c:if test="${item.pickStatus eq 'picked'}">已拣货</c:if>
				   </td>
				</tr>
			</c:forEach>
			</tbody>
			
	</table>
	</div></div></div></div>
	
	
<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-edit"></i>
					<h3 class="box-title">拣选车信息</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
	
	<!-- 拣选车信息 -->
	<table id="contentTable" class="table table-bordered table-condensed">
		<thead><tr>
			    <th style="width: 5%">架位编号</th>
			    <th style="width: 5%">架位名称</th>
			    <th style="width: 5%">状态</th>
			    <th style="width: 10%">订单号</th>
			    <th style="width: 5%">商品数量</th>
			    <th style="width: 70%;height:auto;">商品信息</th>
			</tr></thead>
		<tbody id="stockInfo">
		   <c:if test="${task.status eq '11' }">
		      <c:forEach items="${curStockList}" var="s" varStatus="i">
				<tr name='tr_stock' >
				   <td id="stockCode_${s.stockCode}">${s.stockCode}</td>
				   <td id="stockName_${s.stockCode}">${s.stockName}</td>
				   <td id="${s.stockCode}" name="status" >
				     <c:if test="${s.status eq 'free' }">空置中</c:if>
				     <c:if test="${s.status eq 'busy' }"><font color=blue>使用中</font></c:if>
				   </td>
				   <td id="orderno_${s.stockCode}" name="orderno">${s.orderno}</td>
				   <td id="goodsNum_${s.stockCode}" >${s.goodsNum}</td>
				   <td id="goodsInfo_${s.stockCode}" >${s.goodsInfo}</td>
				</tr>
			</c:forEach>
		   </c:if>
		</tbody>
	</table>
	</div></div></div></div>
	
	<div class="modal fade"  id="printPickTask">
	<div class="modal-dialog" >
	<div class="modal-content"  >
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">
					×
				</button>
				<h3 id="myModalLabel">
                                                        打印拣货单信息
				</h3>
				<span id="messageLable"></span>
				<input type="hidden" id="taskCode"/>
			</div>
			<div class="modal-body">
				<div class="control-group">
					<div class="controls">
						  选择打印机:
						<select id="pickTaskStylePrint" name="pickTaskStylePrint" >

						</select>
					</div>
					<div class="controls">
						 纸张尺寸:
						<select id="paperSizes" name="paperSizes" class="form-control"  >
							<option value="A4" selected="selected" >A4</option>
							<option value="A5" >A5</option>
						</select>
					</div>
				</div>
			</div>

			<div class="modal-footer">
				<a class="btn btn-primary" data-dismiss="modal" aria-hidden="true" onclick="printFastPickTask()"> 立即打印 </a>
				<a class="btn" data-dismiss="modal" aria-hidden="true"> 关闭 </a>
			</div>
		</div>
		</div>
		</div>
</section>
</body>
</html>